<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			.text-box {
				margin: 20px 0;
			}

			.btn-box {
				text-align: center;
				margin: 10px auto;
			}

			button {
				padding: 10px;
				margin: 0 10px;
				border-radius: 10px;
			}

			.course-header {
				line-height: 60px;
				display: flex;
			}

			.course-header-month {
				font-size: 20px;
			}

			.course-header-month select {
				font-size: 20px;
			}

			.course {
				display: flex;
			}

			.course>div:nth-child(2) {
				margin: 20px;
			}

			.course>div:nth-child(2)>h3 {
				text-align: center;
			}

			.course-date {
				min-width: 700px;
				width: 700px;
			}

			.course-date-header {
				background-color: #23D96E;
				height: 40px;
			}

			.course-date-header>div {
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border: 1px solid black;

				font-weight: bold;
				box-sizing: border-box;
				float: left;
			}

			.course-date-header>div:nth-child(6),
			.course-date-header>div:nth-child(7) {
				background-color: #eaeaea;
				color: red;
			}

			.course-date-box>div {
				width: 100px;
				height: 120px;
				border: 1px solid black;
				box-sizing: border-box;
				position: relative;
				float: left;
			}

			.date-fill {
				background-color: #eaeaea;
			}

			.date-bg {
				width: 100px;
				height: 120px;
				position: absolute;
				line-height: 120px;
				text-align: center;
				color: #000;
				font-size: 40px;
				box-sizing: border-box;
			}

			.date-am,
			.date-pm {
				height: 50px;
				width: 100px;
				position: relative;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				font-weight: bold;
				z-index: 2;
			}

			.date-am>div,
			.date-pm>div {
				width: 25px;
				box-sizing: border-box;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border: 1px solid #626262;
			}

			.date-am>div:nth-child(5),
			.date-pm>div:nth-child(5) {
				width: 100px;
				background-color: rgba(35, 217, 110, .1);
			}

			.date-ev {
				height: 20px;
				width: 100px;
				box-sizing: border-box;
				display: flex;
				font-weight: bold;
				position: relative;
				z-index: 2;
			}

			.date-ev>div {
				width: 50px;
				box-sizing: border-box;
				height: 20px;
				line-height: 20px;
				text-align: center;
				border: 1px solid #626262;

			}
		</style>
		<title>排课工具</title>
	</head>
	<body>
		<h1>排课工具</h1>
		<div class="course-header">
			<div class="course-header-month">
				选择月份：
				<select id="course-month" onchange="initCourse(event)">
					<option value="-1">请选择</option>
					<option value="0">1月</option>
					<option value="1">2月</option>
					<option value="2">3月</option>
					<option value="3">4月</option>
					<option value="4">5月</option>
					<option value="5">6月</option>
					<option value="6">7月</option>
					<option value="7">8月</option>
					<option value="8">9月</option>
					<option value="9">10月</option>
					<option value="10">11月</option>
					<option value="11">12月</option>
				</select>
			</div>
			<div>
				<button onclick="createCourse()">生成课表</button>
			</div>
			<div>
				总课时数：<span id="totalAll"></span>
			</div>

		</div>
		<div class="course">

			<div id="course-date" class="course-date">
				<div class="course-date-header">
					<div>星期一</div>
					<div>星期二</div>
					<div>星期三</div>
					<div>星期四</div>
					<div>星期五</div>
					<div>星期六</div>
					<div>星期日</div>
				</div>
				<div id="course-date-box" class="course-date-box"></div>
			</div>
			<div style="width: 100%;">
				<h3>课程</h3>
				<textarea placeholder="请输入课程" spellcheck="false" class="text-box" id="data" rows="25"
					style="width: 100%;"></textarea>
			</div>

		</div>
	</body>
	<script>

	</script>
</html>
